<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>laofan</title>
    <script src="jquery.min.js"></script>

    <style>

        #div1 {
            width: 500px;
            height: auto;
            background: #fff3a5;
            border: 1px solid cornflowerblue;

        }

        p {
            border: 1px solid black;
            background: whitesmoke;
            width: 150px;
            border-radius: 15px;
            text-align: center;

        }

        .detail_click > button {
            background: greenyellow;
            font-size: 16px;
            border-radius: 10px;
        }
    </style>

</head>
<body>

<div id="div1">
    <p>这是表格1内容</p>
    <div class="detail_click">
        <button>展开</button>
    </div>
    <div class="detail_content">
        <h4>小学的时候用作起床铃，<br>
            现在都大二，真怀念当初无忧无虑的生活，<br>
            那时候的日子比现在有盼头多了
        </h4>
    </div>

    <p>这是表格2内容</p>
    <div class="detail_click">
        <button>展开</button>
    </div>
    <div class="detail_content">
        <h4>
            晚风吹动着竹林，月光拉长的身影，<br>
            萤火虫 一闪闪，<br>
            满山飞舞的钱币，天上银河在发光，<br>
            地上风铃来歌唱，织女星 在远方，
            古老浪漫的神话，流水 走过，<br>
            就像四季的变换，幸福 在蔓延，
            爱你永恒不孤单，恋人手中樱花草，春在漫步的微笑，<br>
            种下了 一朵朵，青春璀璨的年少，<br>
            恋人怀中樱花草，听见胸膛
        </h4>
    </div>
</div>

<script type="text/javascript">
    $('.detail_click').click(function () {
        //$(this) 为 detail_click 实体
        $(this).next().slideToggle('1000', function () {
            //$(this) 为 detail_content 实体
            // $(this).prev() 为 detail_click 实体
            $(this).prev().text($(this).is(":visible") ? "收起" : "展开");


        });
    })
</script>

</body>
</html>